<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">点击触发后置防抖</button>
    <button class="btn2">点击我触发前置防抖</button>
    <script>
        // 防抖（debounce）： 在一段时间内 让某个事件只执行一次 ，如果不停的触发 那么会重新计时 。
       
       
    //   1. 防抖 （后置防抖：点击之后过一段时间执行一次）
        var btnEle = document.querySelector(".btn");
        var fn = function(){
            console.log(1111);
        }
        var timer = null;
        btnEle.onclick = function(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },1000)
        }
        // 当第一次点击的时候  ： 清空 timer=  null  clearTimeout(null);  --->生成一个新定时器 timer = 1;---->过1s之后执行fn函数
        // 第二次 点击的时候： 清空timer = 1 （上次的定时器）  --->生成一个新的定时器 timer = 2; --->1s之后执行fn函数；


    // 2.防抖 前置 （先执行函数在防抖）;
    var btnEle2 = document.querySelector(".btn2");

    var fn2 = function(){
        console.log(2222);
    }

    var timer = null;
    btnEle2.onclick = function(){
        // if(!timer){
        //     fn2()
        // }

        !timer && fn2();
        clearTimeout(timer);
        timer = setTimeout(function(){
            timer = null;
        }, 1000);
    }

    // 第一次点击： timer = null (false)--->  !timer (true) --->立刻执行fn2----》clearTimeout(null)(无意义)
    // ---》 生成一个timer = 1； ----》timer=null?? 看时间？？
    // 第二次点击  1.在1s之内  没有执行上一次的  timer=null 就被 第二次的  clearTimeout(timer);清除了
                        // timer = 1  不会执行 fn2函数 ----》清除上一次的clearTimeout(timer); -- 又生成一个新的  timer = 2；
                //  2. 在1s之外点击的 。 timer = null 就已经被成功赋值
                    // timer = null  --->会执行 fn2（）； ---->clearTimeout无意义 --->生成一个新的timer = 2

    </script>
</body>
</html>